<template>
    <view-box>
        <div class="">
            <flexbox orient="vertical" v-if="items">
                <flexbox-item v-for="(itemc, index) in items"  link="/Details" :key="index">
                    <div class="flex-demo myapply-ciong">
                        <p style="padding-left: 2.8%">
                            <span class="myapply-span1">
                                {{itemc.position_name}}
                                {{itemc.pay}}
                            </span>
                            <span class="myapply-span2">
                                {{itemc.age_limit}}
                                {{itemc.company_name}}
                            </span>
                            <span class="myapply-span3">{{itemc.updated_at}}</span>
                        </p>
                        <p align="right" style="padding-right: 2.8%;">
                            <span class="myapply-span3">{{itemc.datasc}}</span>
                            <span class="myapply-span2" v-if="itemc.status == 0" style="margin-top: 54px;">
                                未查看
                            </span>
                            <span class="myapply-span2" v-if="itemc.status == 1" style="margin-top: 54px;">
                                                已查看
                                            </span>
                            <span class="myapply-span2" v-if="itemc.status == 2" style="margin-top: 54px;">
                                               同意面试
                                            </span>
                            <span class="myapply-span2" v-if="itemc.status == 3" style="margin-top: 54px;">
                                               拒绝
                                            </span>
                        </p>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
        <div class="button-releaase"><button class="zhiweifbu" @click="$router.push('/issue')">职位发布</button></div>
        <!--<items :items="items"></items>-->
        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
            <empty slot="no-results" tips="暂时没有相关商品"></empty>
        </infinite-loading>
    </view-box>
</template>

<script>
import { ViewBox, Box, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      index01: 0,
      demo2: '美食',
      demoDisabled: 'A',
      index: 0,
      items: [],
      identity: 0,
      user: [{
        account: '',
        avatar: ''
      }]
    }
  },
  mounted () {
  },
  methods: {
    infiniteHandler ($state) {
      this.$http.get('/myReleasePosition', {
        copm: {
          page: this.items.length / 20 + 1,
          page_size: 20
        }
      }).then(response => {
        if (response.data.data.length) {
          this.items = this.items.concat(response.data.data)
          this.identity = response.data.identity
          console.log(this.items)
          $state.loaded()
          if (!response.data.next_page_url) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.button-releaase{
    width: 100%;
    background: #fff;
    height: 45px;
    position: fixed;
    bottom: 0px;
    left: 0px;
}
.zhiweifbu{
    width: 80%;
    margin-left: 10%;
    background:#fe0001;
    height: 35px;
    border: 1px solid #fe0001;
    color: #fff;
    font-size: 15px;
    margin-top: 3px;
    border-radius: 8px;
}
    .vux-slider {
        height: 100%;
    }
    .myapplyForther{
        width: 100%;
        height: 79px;
        display:flex;
        background: #000;
    }
    .myapplyForther p{
        width: 100%;
        height: 79px;
        line-height: 43px;
    }
    .myapplyForther span{
        font-size:27.49px;
        color: #fff;
    }
    .myapply-ciong{
        width: 100%;
        background: #fff;
        /* height: 132.8px; */
        display: flex;
        border-bottom: 1px solid #f4f4f4;
        padding-bottom: 10px;
    }
    .myapply-ciong p{
        width: 50%;
        flex-wrap: wrap;
        line-height: 20px;
    }
    .myapply-span1{
        font-size: 18.499px;
        color:#333333;
        width: 100%;
        margin-top: 20px;
        display:inline-block
    }
    .myapply-span2{
        width: 100%;
        font-size: 16.49px;
        color:#fe0001;
        margin-top: 20px;
        display:inline-block
    }
    .myapply-span3{
        width: 100%;
        font-size:14px;
        color: #999999;
        margin-top: 20px;
        display:inline-block
    }
</style>